<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/gou.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/new_file.css"/>
        <script src="../../js/ajax.js"></script>
        <style>
            .pagination{
                display: flex;
                width: 300px;
                text-align: center;
                background-color: rgb(252, 238, 238);
                border-radius: 25px;
                overflow: hidden;
                margin: 0 auto;
            }
            .pagination a{
                width: 30px;
                line-height: 30px;
                color: #404040;
                flex:1;
            }
            .pagination a:nth-child(1) {
                transform: rotate(-45deg) ;
            }
            .pagination .next {
                transform: rotate(45deg) ;
            }
            .pagination a:hover{
                color: rgb(247, 73, 73);
            }
        </style>
	</head>
	<body>
		<div class="gou_bar">
			<div class="inner">
				<a><img src="../../img/logo.png"/></a>
               
				<!-- <ul class="bar_ul">
					<li>我的购物车</li>
					<li>确认订单信息</li>
					<li>等待付款</li>
					<li>订单执行</li>
				</ul> -->
			</div>
            <a href="add.html" style="float: right;margin-right: 150px;">添加商品栏</a>
		</div>
		
		<div class="shopping">
			<h4>保税区</h4>
			
			<table id="cartTable">
                <thead>
                    <tr>
                        <th>商品信息</th>
                        <th>商品单价</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr>
                        
                        <td class="goods"><img src="../../img/images/20150708112148lm2t0.jpg" alt=""/><span>飞利浦新安怡卡通企鹅杯学饮杯7安士200ml 训练水杯 防漏带手柄（2件装）</span></td>
                        <td class="price">220.88</td>
                        
                        <td class="operation"><span class="delete">删除</span></td>
                    </tr>
                    
                    <tr>
                        <td class="goods"><img src="../../img/images/3.jpg" alt=""/><span>Sony/索尼 DSC-WX300</span></td>
                        <td class="price">148.50</td>
                        
                        <td class="operation"><span class="delete">删除</span></td>
                    </tr>
                    <tr>
                        <td class="goods"><img src="../../img/images/201608081427026196.jpg" alt=""/><span>韩国MOMMA手工陶瓷奶瓶（220ml,320ml）+保温夜光喂奶灯套装 多款颜色图案随机发货 </span></td>
                        <td class="price">640.60</td>
                        
                        <td class="operation"><span class="delete">删除</span></td>
                    </tr> -->
                </tbody>
            </table>
            <div class="pagination">
                <!-- <a href="javascript:;" class="prev">⌜</a>
                <a href="javascript:;">1</a>
                <a href="javascript:;">2</a>
                <a href="javascript:;">3</a>
                <a href="javascript:;">4</a>
                <a href="javascript:;">5</a>
                <a href="javascript:;" class="next">⌝</a> -->
            </div>
		</div>
        <script>
            let page = 1 ;
            getList();
            function getList(){
                // console.log(111111111);
                ajax({
                    url:"allProduct.php",
                    method:"post",
                    dataType:"json",
                    data:{
                        page
                    },
                    success(data){
                        console.log(data);
                        renderDom(data);
                    }
                });
            }     
            function renderDom(data){
                let bodyEle = document.querySelector("#cartTable > tbody");
                bodyEle.innerHTML = '';
                data.forEach(item=>{
                    let trEle = document.createElement("tr");
                    trEle.innerHTML = `
                    <td class="goods"><img src="./uploads/${item['srcImg']}" alt=""/><span>${item['pname']}</span></td>
                    <td class="price">￥${item['price']}</td>
                    <td class="operation"><span myid="${item['id']}" class="del">删除</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="upd"><a href="upd.html?id=${item['id']}">修改</a></span></td>
                    `;
                    let delBtn = trEle.querySelector(".del");
                    delBtn.onclick = function (){
                        let id = this.getAttribute("myid");
                        ajax({
                            url:'del.php',
                            method:'post',
                            data:{
                                id
                            },
                            dataType:"json",
                            success(data){
                                if( data['status'] == 1 ){
                                    window.alert('删除成功');
                                    getList();
                                } else{
                                    window.alert('操作失败');
                                }
                            }
                        });
                    }
                    bodyEle.appendChild(trEle);
                });
            }
            getPage();
        function getPage(){
            ajax({
                url:"getPage.php",
                method:"post",
                dataType:"json",
                success(data){
                    let page = data['totalPage'];
                    pageRender(page);
                }
            });
        }
        
        function pageRender(num){
            let pagEle = document.querySelector(".pagination");
            pagEle.innerHTML = '' ;
            let str = '' ;
            for(let i = 1 ; i <= num ; i ++ ){
                str += `<a href="javascript:;">${i}</a>`
            }
            pagEle.innerHTML = `<a href="javascript:;" class="prev">⌜</a>
                            ${str}
                            <a href="javascript:;" class="next">⌝</a>`;
            let aEles = pagEle.querySelectorAll("a");
            aEles.forEach(function(aEle,key){
                aEle.onclick = function (){
                    // aEles.forEach(function(item,index){
                    //     if( key == index ){
                    //         aEle.classList.add("active");
                    //     } else {
                    //         aEle.classList.remove("active");
                    //     }
                    // });
                    if( aEle.className == "prev" ){
                        if( page > 1 ){
                            page = page - 1 ;
                            getList();
                        }
                    } else 
                    if( aEle.className == "next" ){
                        if( page < num ){
                            page = page + 1 ;
                            getList();
                        }
                    } else {
                        page = parseInt(aEle.innerHTML.trim()) ;
                        getList();
                    }
                }
                
            });
        }
        </script>
</html>